// 左侧文本tab切换页面内容
import React from 'react'; 
import './text.css'; 

// 定义一个图片数组，包含多个图片的 URL
const images = [
  "//s.ibaotu.com/editor/img/specificWordPreview/00-big.png",
  "https://s.ibaotu.com/editor/img/specificWordPreview/01-big.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-14.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-50.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-31.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-45.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-47.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-54.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-29.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-11.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-49.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-53.png"
];


  // 在组件内部定义了一个名为 handleDragStart 的函数，用于处理拖拽开始事件。当用户开始拖拽一张图片时，这个 函数会被触发。这个函数会将被拖拽图片的 URL 存储在拖拽数据中，使得用户可以将图片拖拽到其他地方（例如文本编辑器或其他支持拖放的区域）
  
const Text: React.FC = () => {
  // 处理拖拽开始事件的函数
  const handleDragStart = (event: React.DragEvent<HTMLImageElement>, src: string) => {
    // 设置拖拽数据，将图片的源 URL 存储在拖拽数据中
    event.dataTransfer.setData('text/plain', src);
  };

  return (
    <div className='Text'>
      <div className='Text_btn'>
        <button >+ 添加标题</button>
        <button >+ 添加正文</button>
      </div>
    
      <div className='Text_botton'>
        {/* 通过 map 方法遍历 images 数组，为每个图片生成一个 <img> 标签，并设置了拖拽属性和事件处理函数。 */}
        {images.map((src, index) => (
          <span key={index}>
            {/* 每个图片都有 src 属性指向对应的 URL，alt 属性提供了替代文本以提升无障碍访问性，且 draggable 属性允许其被拖拽。 */}
            <img 
              src={src} // 图片的源 URL
              alt={`Image ${index}`} // 图片的替代文本，用于无障碍访问
              draggable // 允许该图片被拖拽
              onDragStart={(event) => handleDragStart(event, src)} // 设定拖拽开始时的处理函数
            />
          </span>
        ))}
      </div>
    </div>
  );
}

export default Text;